<template>
  <div class="manager">
    <div class="manager-cont">
      <device-retrieval :category="category" :statuses="statuses">
        <h3>设备管理</h3>
      </device-retrieval>
      <device-opera :statuses="statuses" :pathname="pathname">
        
            <p class="device-status">
              <span>维修中<i class="gray line"></i></span>
              <span>使用中<i class="deepgreen line"></i></span>
              <span>闲置中<i class="green line"></i></span>
              <span>报废中<i class="red line"></i></span>
          </p>
        
      </device-opera>
    </div>
  </div>
</template>

<script>
import DeviceRetrieval from './registerComponents/DeviceRetrieval.vue'
import DeviceOpera from './registerComponents/DeviceOpera.vue'
export default {
  name: "MainManager",
  data() {
    return {
      category: [],
      statuses: [
        {
          value: "STATUS3",
          label: "闲置中"
        },
        {
          value: "STATUS4",
          label: "使用中"
        },
        {
          value: "STATUS5",
          label: "维修中"
        },
        {
          value: "STATUS6",
          label: "报废中"
        }
      ],
      pathname:"/equip-list"
    }
  },
  components: {
    DeviceRetrieval,
    DeviceOpera
  },
  created() {
    this.$axios({
      method: "get",
      url: '/category-list'
    }).then(res => {
      this.category = res.data.data
    })
  }
}
</script>

<style lang="less">
.manager {
  padding: 25px 10px;
  background-color: #fff;

  .manager-cont {
    display: flex;

    .line {
      display: inline-block !important;
      width: 6px;
      height: 10px;
    }

    .opera {
      flex: 1;
      padding: 0 10px;
      .device-status {
        display: flex;
        justify-content: flex-end;
        span {
          margin-right: 6px;
          i {
            margin-left: 2px;
          }
        }
      }
    }

    .green {

      background-color: green !important;
    }

    .blue {

      background-color: blue !important;
    }
    .gray {
      background-color: gray !important;
    }
  .deepgreen {
    background-color: rgb(25, 137, 0);
  }
  .red {
    background-color: red;
  }
  }
}
</style>